<!-- 我的遥控器 -->

<template>
  <div :class="className">
    <div :class="topClass">
      <div @click="toControl(1, '上转')"><i class="el-icon-caret-top" /></div>
      <div @click="toControl(4, '右转')"><i class="el-icon-caret-right" /></div>
      <div @click="toControl(2, '下转')"><i class="el-icon-caret-bottom" /></div>
      <div @click="toControl(3, '左转')"><i class="el-icon-caret-left" /></div>
      <!-- <div @click="toControl(11, '还原')" /> -->
    </div>

    <div :class="middleClass">
      <div>
        <i class="el-icon-remove" @click="toControl(6, '画面缩小')" />
        <span>缩放</span>
        <i class="el-icon-circle-plus" @click="toControl(5, '画面放大')" />
      </div>
      <div>
        <i class="el-icon-remove" @click="toControl(8, '焦点后移')" />
        <span>聚集</span>
        <i class="el-icon-circle-plus" @click="toControl(7, '焦点前移')" />
      </div>
      <div>
        <i class="el-icon-remove" @click="toControl(10, '光圈缩小')" />
        <span>光圈</span>
        <i class="el-icon-circle-plus" @click="toControl(9, '光圈放大')" />
      </div>
    </div>

    <div :class="bottomClass">
      <div class="flexCC">视频巡逻</div>
      <div class="flex">
        <ParamSelect :param="patrol_one" bind="id" :dict="patrol_selectDict" small @change="patrol_startOne" />
        <div class="flex0" @click="toLoop" />
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import CONST from '@admin/components/CommonVideo/HkPlayer/CONST'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyControl',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixBase(),
    CORE.mixSubmit('control', 'control_'),
    CORE.mixSelect('patrol', 'patrol_'),
    CORE.mixOne('patrol', 'patrol_'),
  ],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 样式名称
     */
    className() {
      return `VideoPlay-${this.$options.name}`
    },

    /**
     * 顶部样式
     */
    topClass() {
      const { className, control_one } = this
      const name = `${className}-top`
      const disabledStr = control_one.cameraId ? '' : ` ${name}-disabled`
      return `${name}${disabledStr}`
    },

    /**
     * 中部样式
     */
    middleClass() {
      const { className, control_one } = this
      const name = `${className}-middle`
      const disabledStr = control_one.cameraId ? '' : ` ${name}-disabled`
      return `${name}${disabledStr}`
    },

    /**
     * 底部样式
     */
    bottomClass() {
      const { className, patrol_one, MAP } = this
      const name = `${className}-bottom`
      const disabledStr = patrol_one.id ? '' : ` ${name}-disabled`
      const loopStr = MAP.loop ? ` ${name}-loop` : ''
      return `${name}${disabledStr}${loopStr}`
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 操作
     */
    toControl(command, TIP) {
      const { control_one, control_MAP } = this
      if (control_one.cameraId) {
        control_MAP.tipSubmit = TIP
        control_one.command = command
        this.control_startSubmit()
      } else {
        CORE.MSG.info('当前窗口暂无视频')
      }
    },

    /**
     * 循环
     */
    async toLoop() {
      if (this.MAP.loop) {
        await this.stopLoop()
        CORE.MSG.info('已停止巡逻')
      } else {
        if (this.patrol_one.id) {
          await this.startLoop()
          CORE.MSG.success('已开始巡逻')
        } else {
          CORE.MSG.warning('请选择巡逻路线')
        }
      }
    },

    /**
     * 开始循环
     */
    async startLoop() {
      // 将当前巡逻路线保存在 chosen 中
      this.patrol_setChosen(this.patrol_one)

      // 初次播放
      this.play()

      // 设置定时器
      this.MAP.loopTimer = setInterval(this.play, this.patrol_chosen.suspendTime * 1000)

      // 标记循环
      this.MAP.loop = true
    },

    /**
     * 停止循环
     */
    async stopLoop() {
      // 清除定时器
      clearInterval(this.MAP.loopTimer)

      // 清除循环
      CORE.merge(this.MAP, { loop: false, loopTimer: 0, loopIndex: 0 })
    },

    /**
     * 播放
     */
    async play() {
      const { PLAYER = {}, loopIndex } = this.MAP
      const { player, wndNum } = PLAYER
      const { patrolRouteDeviceDto: deviceList, loopAble } = this.patrol_chosen

      // 设置参数
      const list = deviceList.slice(loopIndex, loopIndex + wndNum).map((item, i) => ({
        ...CONST.PREVIEW_CONFIG,
        cameraIndexCode: item.thirdCode || '-', // 监控点编号
        wndId: i + 1, // 播放窗口序号（在 2x2 以上布局下可指定播放窗口），json 中选填
      }))

      // 停止播放
      await player.JS_RequestInterface({
        funcName: 'stopMultiPlay',
        argument: { list: Array(wndNum).fill().map((_, i) => ({ wndId: i + 1 })) },
      })

      // 开始预览
      await player.JS_RequestInterface({
        funcName: 'startMultiPreviewByCameraIndexCode',
        argument: JSON.stringify({ list }),
      })

      // 更新循环序号
      if (loopIndex + wndNum < deviceList.length) {
        this.MAP.loopIndex = loopIndex + wndNum
      } else {
        this.MAP.loopIndex = 0
        if (loopAble === 2) this.stopLoop()
      }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
